<template>
  <!-- vue3页面 -->
  <!-- <main class="mian">
    <div class="mianBox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </main> -->
  <div class="wrap">
    <div class="swipper">
      <div class="swipper-item">1</div>
      <div class="swipper-item">2</div>
      <div class="swipper-item">3</div>
      <div class="swipper-item">4</div>
      <div class="swipper-item">1</div>
      <div class="swipper-item">2</div>
      <div class="swipper-item">3</div>
      <div class="swipper-item">4</div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.wrap {
  height: 100px;
  width: 300px;
  overflow: hidden;
}
.swipper {
  animation: move 3s infinite linear;
}
.swipper-item {
  background: pink;
  height: 100px;
  width: 100%;
}
.swipper-item:nth-child(2n) {
  background: skyblue;
}
.mianBox {
  width: 700px;
  height: 500px;
  transform-style: preserve-3d;
  transition: all 1s;
  margin: 5% auto;
  animation: carouselrotate 20s infinite linear;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mianBox:hover {
  animation-play-state: paused;
}
.main {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}
.item {
  position: absolute;
  width: 200px;
  height: 150px;
  background-color: pink;
  border-radius: 10px;
  animation: 20s yuan infinite linear;
}

.item:nth-child(1) {
  transform: rotateY(0deg) translateZ(288px);
  background-color: #ffa39e;
}
.item:nth-child(2) {
  transform: rotateY(60deg) translateZ(288px);
  background-color: #ffd591;
}
.item:nth-child(3) {
  transform: rotateY(120deg) translateZ(288px);
  background-color: #b7eb8f;
}
.item:nth-child(4) {
  transform: rotateY(180deg) translateZ(288px);
  background-color: #87e8de;
}
.item:nth-child(5) {
  transform: rotateY(240deg) translateZ(288px);
  background-color: #91d5ff;
}
.item:nth-child(6) {
  transform: rotateY(300deg) translateZ(288px);
  background-color: #d3adf7;
}
@keyframes carouselrotate {
  from {
    transform: rotateX(-3deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-3deg) rotateY(-360deg);
  }
}

@keyframes move {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -50%, 0);
  }
}
</style>
